import React, { Component } from 'react';
import { GeoJSONMap } from '@/components/Charts';
import mapDataDetail from './geoJSONMapDataDetail';
import mapData from './geoJSONMapData';

export default class GeoJSONMapDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      areaNumber: '',
    };
  }

  componentWillMount() {
    const { areaNumber } = this.props;
    if (areaNumber) {
      this.setState({ areaNumber });
    }
  }

  onMapClick = areaNumber => {
    this.setState({ areaNumber });
    const { onMapClick } = this.props;
    if (onMapClick) {
      onMapClick(areaNumber);
    }
  };

  render() {
    const { areaNumber } = this.state;
    return (
      <div>
        <GeoJSONMap
          mapJson={mapDataDetail}
          areaNumber={areaNumber}
          width={600 * window.viewportScale}
          height={650 * window.viewportScale}
          onMapClick={this.onMapClick}
        />
        <div style={{ position: 'absolute', right: '1rem', top: '1rem' }}>
          <GeoJSONMap
            mapJson={mapData}
            areaNumber={areaNumber}
            width={200 * window.viewportScale}
            onMapClick={this.onMapClick}
          />
        </div>
      </div>
    );
  }
}
